<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title" :class="{ 'active': orderType === nav.type }">{{ nav.title }}</view>
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.order_sn"
					@tap.stop="jump('/pages/order/detail', { order_sn: order.order_sn })">
					<view class="order-head u-flex u-row-between">
						<!--<text class="no">订单编号：{{ order.order_sn }}</text>-->
						<text class="no">积分兑换</text>
						<text class="state">{{ order.status_text }}</text>
					</view>
					<view class="goods-order" v-for="goods in order.goods" :key="goods.id">
						<view class="order-content">
							<shopro-mini-card :title="goods.title" :image="goods.thumb">
								<template #describe>
									<view class="order-sku text-left" style="justify-content: space-between;">
										<text class="order-num">{{goods.option_title}}</text>
										<text class="order-num">x{{ goods.number || 0 }}</text>
									</view>
								</template>
								
								<template #cardBottom>
									<view class="order-price-box u-flex ">
										<text class="order-price font-OPPOSANS">{{ goods.goods_price || 0 }}积分</text>
										<button class="u-reset-button status-btn"
											v-if="order.status_text">{{ order.status_text }}</button>
									</view>
								</template>
							</shopro-mini-card>
						</view>
					</view>
					<view class="order-bottom">
						<view class="all-msg u-flex font-OPPOSANS">
							总支付：
							<view class="all-money font-OPPOSANS">{{ order.total_price }}积分</view>
						</view>

						<!-- 按钮 -->
						<view class="btn-box u-flex" style="margin-top: 10px;">
							<block>
								<button v-if="order.status === 0" @tap.stop="onCancel(order.id, orderIndex)"
									class="u-reset-button obtn3" style="margin-right: 10px;">取消订单</button>
								<button v-if="order.status === 0" @tap.stop="onPay(order,orderIndex)"
									class="u-reset-button obtn2" style="margin-right: 0px !important;">立即支付</button>
								<!-- <button v-if="order.status === 'delete'" @tap.stop="onDelete(order.id, orderIndex)" class="u-reset-button obtn3">删除</button>
								<button v-if="order.status === 'express'" @tap.stop="onExpress(order.id, orderIndex)" class="u-reset-button obtn1">查看物流</button> -->
								<button v-if="order.status === 2" @tap.stop="onReceive(order, orderIndex)"
									class="u-reset-button obtn2" style="margin-right: 0px !important;">确认收货</button>
								<button v-if="order.status === 3" @tap.stop="moOrder(order)"
									class="u-reset-button obtn2" style="margin-right: 0px !important;">再来一单</button>
							</block>
						</view>
					</view>
				</view>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
		<view v-if="showPay" class="cu-modal bottom-modal" :class="{ show: showPay }" @tap="closePayModal"
			style="z-index: 10080;">
			<view class="pay-method-dialog cu-dialog safe-area-inset-bottom u-p-30" @tap.stop
				style="border-radius: 20rpx 20rpx 0 0;">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">选择支付方式</view>
				</view>
				<view class="pay-box">
					<view class="u-flex u-row-between pay-item">
						<view class="u-flex">
							<image class="pay-img" src="/static/images/jifen.png" mode=""></image>
							<text>积分支付</text>
						</view>
						<text class="u-m-r-30">剩余积分：{{userInfo.score}}积分</text>
					</view>
				</view>
				<button class="u-reset-button pay-btn" @tap="confirmPay">确认支付
					￥{{ recive_order.total_price || '0.00' }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				showPay: false,
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'all',
				orderList: [],
				orderState: [{
						id: 0,
						title: '全部订单',
						type: 'all'
					},
					{
						id: 1,
						title: '待支付',
						type: 'nopay'
					},
					{
						id: 2,
						title: '待发货',
						type: 'fahuo'
					},
					{
						id: 3,
						title: '待收货',
						type: 'shouhuo'
					},
					{
						id: 4,
						title: '已完成',
						type: 'pingjia'
					}
				],
				recive_order: '',
				orderIndexs: ''
			};
		},
		computed: {
			...mapGetters(['userInfo']),

		},
		onShow() {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getOrderList();
			this.user()
		},
		methods: {
			...mapActions(['getUserInfo']),
			user() {
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			closePayModal() {
				this.showPay = false
			},
			moOrder(order) {
				let that = this;
				that.$http('order.order_too', {
						order_sn: order.order_sn
					},
					'添加中...'
				).then(res => {
					if (res.code === 1) {
						uni.navigateTo({
							url: '/pages/index/cart'
						})
					}
				});
			},
			confirmPay() {
				let that = this;
				that.$http('order.order_pay', {
					order_sn: that.recive_order.order_sn,
					type: 'score'
				}, '加载中...').then((res) => {
					if (res.code === 1) {
						that.showPay = false
						that.$u.toast('支付成功');
						that.orderList[that.orderIndexs].status = 1
						that.orderList[that.orderIndexs].status_text = '待发货'
						// that.orderList.splice(that.orderIndexs, 1);
					}
				})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// tab切换
			onNav(id) {
				if (this.orderType !== id) {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getOrderList();
				}
			},

			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.order_list', {
					status: that.orderType,
					page: that.currentPage
				}, '加载中...').then(res => {
					console.log(res);
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.list];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.total_page;
						that.loadStatus = that.currentPage < res.data.total_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},

			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
									id: orderId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},

			// 取消订单
			onCancel(id, orderIndex) {

				let that = this;
				uni.showModal({
					content: '是否取消订单？订单取消后将会退回至购物车内！',
					confirmText: '确认',
					cancelText: '返回',
					confirmColor: '#E77817',
					success(res) {
						if (res.confirm) {
							that.$http('order.cancel', {
									order_id: id
								},
								'取消中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast('取消成功');
									setTimeout(() => {
										that.orderList.splice(orderIndex, 1);
									}, 500)
								}
							});
						}
					}
				})

			},

			// 立即购买
			onPay(id, index) {
				this.orderIndexs = index
				this.recive_order = id
				this.showPay = true
				return
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}`
				});
			},
			// 确认收货
			onReceive(id, index) {
				let that = this;
				uni.showModal({
					content: '是否确认收货？',
					confirmText: '确认',
					cancelText: '取消',
					confirmColor: '#E77817',
					success(res) {
						if (res.confirm) {
							that.$http('order.confirm', {
									order_sn: id.order_sn
								},
								'收货中...'
							).then(res => {
								console.log(res);
								if (res.code === 1) {
									that.$u.toast('收货成功');
									setTimeout(() => {
										that.orderList[index].status = 3
										that.orderList[index].status_text = '已完成'
									}, 500)
								}
							});
						}
					}
				})
			},

			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;

				&.active {
					color: #E77817;
				}
			}
		}
	}

	.order-list {
		background: #fff;
		margin: 30rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		border-radius: 20rpx;

		.order-bottom {
			padding-bottom: 20rpx;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				border: 2rpx solid rgba(51, 46, 46, 0.20);
				border-radius: 10rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 160rpx;
				line-height: 60rpx;
				background: #E77817;
				border-radius: 10rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #fff;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.order-head {
			height: 77rpx;
			line-height: 77rpx;

			.no {
				font-size: 26rpx;
				color: #000;
			}

			.state {
				font-size: 26rpx;
				color: #a8700d;
			}
		}

		.goods-order {
			border-top: 1px solid rgba(112, 112, 112, 0.1);
			padding: 20rpx 0;

			.order-content {
				padding-bottom: 20rpx;

				.order-sku {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 500rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 26rpx;
						font-weight: 600;
						color: #E77817;
					}
				}
			}
		}
	}

	.pay-box {
		.pay-item {
			height: 90rpx;
			padding: 0 30rpx;
			font-size: 26rpx;
			background: #fff;
			width: 750rpx;
			border-bottom: 1rpx solid #eeeeee;

			&:last-child {
				border-bottom: none;
			}

			.pay-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
			}
		}
	}

	.pay-btn {
		width: 690rpx;
		line-height: 80rpx;
		background: #E77817;
		border-radius: 20rpx;
		color: rgba(#fff, 0.9);
		margin: 60rpx auto 0;
	}
</style>